
/* 自定义复选框外观 */
label {
    display: inline-flex;
    align-items: center;
    position: relative;
    /* 关键点！ */
    cursor: pointer;
    font-size: 16px;
    padding-left: 20px;
    /* 让文字不重叠 */
}


/* 复选框的圆形外观 */
label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: white;
    transition: background-color 0.3s;
}

/* 隐藏指定input的原始复选框 */
#checkBox3,
#checkBox4 {
    display: none;
}

/* 选中后的复选框效果 */
#checkBox3:checked+label::before,
#checkBox4:checked+label::before {
    background-color: green;
}

/* 选中时显示白色勾选标记 */
#checkBox3:checked+label::after,
#checkBox4:checked+label::after {
    content: '✔';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: white;
    font-weight: bold;
}
